<div class="form-group clearfix">
    <div class="pull-left form-inline">
        <button type="button" class="btn btn-default" (click)="addModal.show();">新建角色</button>
    </div>
</div>

<div>
    <table class="table">
        <thead>
        <tr>
            <th>ID</th>
            <th>角色名称</th>
            <th>描述</th>
            <th>创建时间</th>
            <th>修改时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of roleList.list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
            <td>{{item.created_at}}</td>
            <td>{{item.updated_at}}</td>
            <td>
                <a href="javascript:;" (click)="editModal.show();getRoleInfo(item.id)">修改</a>-
                <a href="javascript:;" (click)="staticModal.show();getPermissionGroup(item.id);">权限分配</a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="text-center">
        <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage"
                    [(ngModel)]="currentPage"
                    previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"
                    [boundaryLinks]="true" class="pagination-sm"></pagination>
    </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow" (promptIsShow)="promptIsShow($event)"></app-notification>

<!-- 添加角色 -->
<div class="modal fade" bsModal #addModal="bs-modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left">新建角色</h4>
                <button type="button" class="close pull-right" aria-label="Close" (click)="addModal.hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form #addRoleForm = "ngForm" (ngSubmit) = "addRoleSubmit()">
                    <div class="form-group clearfix">
                        <label class="col-md-2">角色名称</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="name" [(ngModel)]="addRole.name" name="name" required>
                            <div [hidden]="addRoleForm.controls.name?.valid || addRoleForm.controls.name?.pristine" class="alert alert-danger">
                                <p *ngIf="addRoleForm.controls.name?.errors?.required">必须输入</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="col-md-2">角色</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="slug" [(ngModel)]="addRole.slug" name="slug" required>
                            <div [hidden]="addRoleForm.controls.slug?.valid || addRoleForm.controls.slug?.pristine" class="alert alert-danger">
                                <p *ngIf="addRoleForm.controls.slug?.errors?.required">必须输入</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="col-md-2">角色描述</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="description" [(ngModel)]="addRole.description" name="description">
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="col-md-2">所属</label>
                        <div class="col-md-6">
                            <select class="form-control" [(ngModel)]="addRole.belong" name="belong">
                                <option value="admin">管理员角色</option>
                                <option value="member">会员角色</option>
                            </select>
                        </div>
                    </div>
                    <div class="text-center mt20">
                        <button class="btn btn-default btn-md-long" type="button" (click)="addModal.hide()">取消</button>
                        <button class="btn btn-success btn-md-long" type="submit" [disabled]="!addRoleForm.form.valid">提　交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 修改角色 -->
<div class="modal fade" bsModal #editModal="bs-modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left">修改角色</h4>
                <button type="button" class="close pull-right" aria-label="Close" (click)="editModal.hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form #editRoleForm = "ngForm" (ngSubmit)="editRoleSubmit()">
                    <div class="form-group clearfix">
                        <label class="col-md-2">角色名称</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="name" [(ngModel)]="roleInfo.name" name="name" required>
                            <div [hidden]="editRoleForm.controls.name?.valid || editRoleForm.controls.name?.pristine" class="alert alert-danger">
                                <p *ngIf="editRoleForm.controls.name?.errors?.required">必须输入</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="col-md-2">角色</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="slug" [(ngModel)]="roleInfo.slug" name="slug" required>
                            <div [hidden]="editRoleForm.controls.slug?.valid || editRoleForm.controls.slug?.pristine" class="alert alert-danger">
                                <p *ngIf="editRoleForm.controls.slug?.errors?.required">必须输入</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="col-md-2">角色描述</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="description" [(ngModel)]="roleInfo.description" name="description">
                        </div>
                    </div>
                    <div class="form-group clearfix">
                        <label class="col-md-2">所属</label>
                        <div class="col-md-6">
                            <select class="form-control" [(ngModel)]="roleInfo.belong" name="belong">
                                <option value="admin">管理员角色</option>
                                <option value="member">会员角色</option>
                            </select>
                        </div>
                    </div>
                    <div class="text-center mt20">
                        <button class="btn btn-default btn-md-long" type="button" (click)="editModal.hide()">取　消</button>
                        <button class="btn btn-success btn-md-long" type="submit" [disabled]="!editRoleForm.form.valid">提　交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--权限绑定-->
<div class="modal fade" bsModal #staticModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left">角色绑定权限</h4>
                <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="col-md-10">
                        <form class="col-md-12" #statusForm="ngForm" (ngSubmit)="rolePermissionEdit()">
                          <div class="permission-pick" *ngFor="let model of permissionGroup;let i of index">
                                {{model.model}}：
                              <br />
                                <div class="form-inline">
                                    <div class="checkbox col-lg-6" style="margin-bottom:5px;" *ngFor="let lt of model.data;let j of index">
                                        <label>
                                            <input type="checkbox" [checked]="lt.checked" (change)="checkRolePermission($event,lt.id)">&nbsp;&nbsp;{{lt.name}}
                                        </label>
                                    </div>
                                    <div style="clear:both"></div>
                                </div>
                            </div>
                            <fieldset>
                                <div class="text-center mt20">
                                    <button type="submit" class="btn btn-success btn-md-long">提　交</button>
                                    <a class="btn btn-default btn-md-long" (click)="staticModal.hide()">关　闭</a>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
